<template>
  <div class="detail-box">
    <div class="first">
      <img class="title" src="/images/jinghe/right/外企创新概念@2x.png">
      <div class="firstContent">
        <li>统计时间：{{ time }}</li>
        <!-- <tabList :poptitle="titleList" :popdata="jzList"  :itemStyle="itemStyle" style="padding-top: 33px;"/> -->
        <chanye :dataList="ListData" :one="one" :two="two" style="padding-top: 36px;"/>

      </div>
    </div>
    <div class="first second">
      <img class="title" src="/images/jinghe/right/国内外类别分布对比@2x.png">
      <div class="firstContent">
        <li>统计时间：{{ time }}</li>
        <!-- <pieTu :data="pieData1" :total="total" style="padding-top: 25px;"/> -->
        <div class="pie-group">
          <pie :data="pieData1" title="-------- 国内产业类别分布 --------" pos="zd-leftpie"></pie>
          <pie :data="pieData2" title="-------- 国外产业类别分布 --------" pos="zd-rightpie"></pie>
        </div>
      </div>
      
    </div>
  </div>
</template>

<script>
import verdict from '../components/verdict'
import pie from './components/pie'
import chanye from './components/chanye'

export default {
  data () {
    return {
      jlList1:'',
      jlList2: '',
      dy: '',
      xfly: '',
      pieData1: [],
      pieData2: [],

      ListData: [],
      time: "2020.12",
      total: 0,
      one: '',
      two: ''
    }
  },
  components: { verdict, pie,chanye },
  watch: {

  },
  methods: {
    async getList4(){
      // let x = await this.$api.get('/es/jsc/cyjh_zdwq',{xfhy: this.xfly, country: this.dy})
      // let xx = await this.$api.get('/es/jsc/cyjh_zdwq_new',{industry: this.industry})
      let xx = await this.$api.get('/es/jsc/cyjh_zdwq_new',{industry: '全部'})


      let mydata1 = []
      let mydata2 = []

      this.ListData = []

      this.total = 0
      // console.log(xx,xx.data['侧图数据']);
      if(xx.status == 200){
        let x = xx.data
        mydata1 = x['国内类别分布']
        mydata2 = x['国外类别分布']
        this.ListData = x['国家列表']
        this.one = x['专利数']
        this.two = x['国家数']

        this.ListData.sort((a, b) => b[1] - a[1])
        mydata1.forEach(element => {
          this.total += parseFloat(element[1])
          this.pieData1.push({
            name: element[0],
            value: element[1]
          })
        })
        mydata2.forEach(element => {
          this.total += parseFloat(element[1])
          this.pieData2.push({
            name: element[0],
            value: element[1]
          })
        })
        
        console.log(this.pieData1)
      }
    },
    async getTime(){
      let {data} = await this.$api.get("/es/jsc/get_time")
      this.time = data["统计时间"].split('.').splice(0,2).join('.')
    }
  },
  mounted() {
    // this.dy = this.$route.query.dy
    // this.xfly = this.$route.query.xfly
    // console.log('right4: ',this.dy,this.xfly)
    this.getList4()
    this.getTime()

  }
}
</script>

<style lang="stylus" scoped>
.detail-box{
  display: flex;
  height: 100%;
  font-family: SourceHanSansCN-Regular !important;
  flex-direction: column;
  .title {
    height: 43px;
    margin-bottom: -5px;
    // margin-bottom: 9px;
  }
  .first {
    // margin-top 9px;
    // background-color: rgba(3, 16, 38, 0.7100);
    .firstContent{
      position: relative;
      // width 389px;
      padding: 0 18px;
      margin 0 auto;
      border-radius: 10px;
      background-color: rgba(3, 16, 38, 0.7100);
      // padding-bottom: 10px;
      padding-bottom: 20px;
    }
  }
  .second{
    margin-top 15px;
  }
  li {
    position: absolute;
    top: 0px;
    right: 18px;
    display: inline-block;
    // width: 132px;
    height: 15px;
    font-size: 15px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 31px;
    color: #b7b7b7;

    opacity: 1;
  }
}
.pie-group {
  display: flex;
  flex-direction: column;
  padding-top: 30px;
}
</style>
